<template>
  <div class="get absolute">
    <div class="back">
      <img src="http://diandian.zgkpz.com/images/m_get/back.png" />
    </div>
    <div class="main">
      <div class="hongbao">
        <div class="content">
          <p>恭喜获得金币</p>
          <div>
            <h3>500<span>币</span></h3>
          </div>
          <small
            >首次注册用户送金币<br />（仅限首次注册用户，卸载再重新安装用户不再赠送）</small
          >
        </div>
      </div>
      <div class="m_list">
        <img
          src="http://diandian.zgkpz.com/images/m_get/lipin.png"
          class="lip"
        />
        <div class="list">
          <ul>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.code img{width:100%;height:100%}
.back img{width:2rem;padding:0.5rem}
.main{font-family:SimHei}
.hongbao{width:5rem;height:7rem;margin-left:1.35rem;background:url("http://diandian.zgkpz.com/images/m_get/hongbao.png")
no-repeat;background-size:100%}
.hongbao .content{text-align:center;position:relative;top:3rem}
.hongbao h3{color:#ffffff;font-size:0.45rem}
.hongbao span{color:#fdff8c;font-size:0.35rem}
.hongbao p{color:#fdff8c;font-size:0.45rem}
.hongbao small{color:#ffea88}
.m_list{position:relative;top:-2rem;text-align:center}
.lip{width:5rem}
.list{width:7rem;height:7rem;margin:-0.65rem 0.3rem;background:url("http://diandian.zgkpz.com/images/m_get/kuang.png") no-repeat;background-size:100%;text-align:center}
.list ul{height:5rem;overflow-y:auto}
.list ul li{width:6rem;height:2rem;background:url("http://diandian.zgkpz.com/images/m_get/juxing.png") no-repeat;background-size:100%;display:inline-flex;text-align:left}
.list ul li:first-child{margin-top:1rem}
.list ul li div{line-height:0.6rem;padding-left:0.3rem}
.list ul li img{padding:0.3rem}
.list ul li h2{color:#ffffff;font-size:0.45rem;margin-top:0.2rem}
.list ul li small{color:#e8b7ff}
.jindutiao{width:3rem;height:0.5rem;background:url("http://diandian.zgkpz.com/images/m_get/yuanjiaojuxing.png")
no-repeat;background-size:100%}
.jindutiao span{}
</style>
